<template>
  <div class="container homepage">
    <ul class="block-list">
      <li class="block">
        <p class="block-header">待签合同</p>
        <p class="block-body">1</p>
      </li>
      <li class="block">
        <p class="block-header">待收合同款</p>
        <p class="block-body">1</p>
      </li>
      <li class="block">
        <p class="block-header">待付费用</p>
        <p class="block-body">0</p>
      </li>
    </ul>

    <div class="panel">
      <div class="panel-header">
        待办事项
      </div>
      <div class="panel-container">
        <ul>
          <li>无</li>
        </ul>
      </div>
    </div>

    <div class="panel">
      <div class="panel-container">
        <vue-event-calendar :events="demoEvents"></vue-event-calendar>
      </div>
    </div>

  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data () {
      return {
        demoEvents: [
          {
            date: '2017/8/27',
            title: '同事崔立宁婚礼',
            desc: '开发组崔立宁婚礼，具体时间地点详见微信群'
          }, {
            date: '2017/8/24',
            title: '团队聚餐',
            desc: '刘总请客团队建设，地点：兴工街北四路交汇处新洪记·丽久饭店226A包房'
          }
        ]
      }
    }
  }
</script>

<style>
  .container.homepage .panel {
    background: #fff;
    margin: inherit;
    display: block;
    margin-top: 30px;
  }

  .block-list {
    display: flex;
    justify-content: space-between;
  }

  .block-list .block {
    width: 29%;
    height: 200px;
    color: #fff;
    border-radius: 5px;
    padding: 20px;
  }

  .block-list li:nth-child(1) {
    background: #ffb574;
  }

  .block-list li:nth-child(2) {
    background: #ff6b75;
  }

  .block-list li:nth-child(3) {
    background: #23b7e5;
  }

  .block-list .block .block-header {
    font-size: 18px;
  }

  .block-list .block .block-body {
    font-size: 48px;
    text-align: center;
    line-height: 150px;
  }
</style>
